// 封装简单版本的ajax请求
// 参数1: 请求地址
// 参数2: 请求方式 默认值 get
// 参数3: 请求携带参数 默认值 ''
// 参数4: 请求成功执行的回调函数 默认值 function(){}

function myAjax(url , type = 'get' , data = '' , cb = function(){}){
    // 1, 创建 ajax 对象
    let xhr = {};
    // 兼容低版本IE浏览器
    if(XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 2, 设定open 如果 是 get 方式 携带参数
    if( type === 'get' ){
        xhr.open( 'get' , `${url}?${data}`);
    }else{
        xhr.open( 'post' , url);
    }

    // 3, 如果是 post 设定 请求头
    if( type === 'post' ){
        xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
    }

    // 4, 设定 send() 如果是 post 携带参数
    if( type === 'get' ){
        xhr.send();
    }else{
        xhr.send( data );
    }

    // 5, 请求成功 执行回调函数
    // 当 ajax 状态码 改变时
    xhr.onreadystatechange = function(){
        // 判断 ajax状态码为 4 并且 http状态码为 200 - 299
        if( xhr.readyState === 4 && ( xhr.status >= 200 && xhr.status <= 299 ) ){
            // 执行回调函数
            // 实参是 ajax请求响应的 响应体数据
            cb(xhr.response);
        }
    }

}


// 封装一个 通过 promise来执行的 ajax 并且返回 promise对象
// 参数1: 请求地址
// 参数2: 请求方式
// 参数3: 携带参数
function pAjax(url , type = 'get' , data = '' ){
    // 创建 一个 promise对象 来执行异步ajax请求
    const p = new Promise(function(f,r){
        // 执行 ajax异步请求
        // 1, 创建 ajax 对象
        let xhr = {};
        // 兼容低版本IE浏览器
        if(XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        // 2, 设定open 如果 是 get 方式 携带参数
        if( type === 'get' ){
            xhr.open( 'get' , `${url}?${data}`);
        }else{
            xhr.open( 'post' , url);
        }

        // 3, 如果是 post 设定 请求头
        if( type === 'post' ){
            xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
        }

        // 4, 设定 send() 如果是 post 携带参数
        if( type === 'get' ){
            xhr.send();
        }else{
            xhr.send( data );
        }

        // 5, 请求成功 执行回调函数
        // 当 ajax 状态码 改变时
        xhr.onload = function(){
            // 判断 ajax状态码为 4 并且 http状态码为 200 - 299
            if( xhr.readyState === 4 && ( xhr.status >= 200 && xhr.status <= 299 ) ){
                // 执行回调函数
                // 实参是 ajax请求响应的 响应体数据
                f(xhr.response);
            }else{
                r();
            }
        }
    });

    // 返回这个 promise对象
    return p;
}

// 封装一个函数 通过 promise 来调用执行 jQuery的 ajax
function myPAjax( url , type = 'get' , data = '' , dataType = 'text' ){
    const p = new Promise(function(f,r){
        $.ajax({
            url:url,
            type: type ,
            data: data ,
            dataType: dataType ,
            success: f,
            error: r , 
        })

    })

    return p;
}